<template>
  <view class="container">
    <!-- 头部登录 -->
    <view class="header">
      <view class="headers"
            @click="goInfo">
        <image class="pic"
               :src="user.avatar ? $serverIp + user.avatar : '../../static/image/gexx_img_mrtx@2x.png'"></image>
        <view class="name">
          <navigator v-if="!user.username"
                     url="/pages/login/login"
                     hover-class="none">登录/注册</navigator>
          <view v-else> {{user.username}} </view>
        </view>
      </view>
      <view class="msg"
            @click="tomsg">
        <image src="../../static/image/wd_ico_xx@2x.png"></image>
      </view>
    </view>
    <!-- 用户权益 -->
    <BoxList :dataList="userBehalf"></BoxList>
    <BoxList :dataList="userOrder"></BoxList>
    <BoxList :dataList="userSettings">
      <!-- <view class="item">
        <image src="../../static/image/wd_ico-sz@2x.png"></image>
        <view class="right"> 设置 </view>
      </view> -->
    </BoxList>
  </view>
</template>

<script>
import { userBehalf, userOrder, userSettings } from './data'
import BoxList from './BoxList'
export default {
  components: { BoxList },
  async onShow() {
    const user = uni.getStorageSync('userinfo') || {}
    let { data } = await this.$http.post('/user/get_user_info')

    if (data.code != 1) {
    } else {
      this.user = { avatar: data.data.avatar, username: data.data.nickname }
    }
  },
  data() {
    return {
      userBehalf,
      userOrder,
      userSettings,
      user: {
        avatar: '',
        username: ''
      }
    }
  },

  methods: {
    tomsg() {
      uni.navigateTo({
        url: '/pages/massage/massage'
      })
    },
    goInfo() {
      if (!uni.getStorageSync('userinfo').token) return this.tipLogin()
      uni.navigateTo({
        url: 'infomation'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #fff;
}

/* 头部登录 */
.header {
  width: 750rpx;
  overflow: hidden;
  // padding: 40rpx 30rpx;
  // background-color: #fff;
  // position: relative;

  .headers {
    width: 750rpx;
    overflow: hidden;
    padding: 40rpx 30rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    position: relative;
  }

  .pic {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 30rpx;
    background-color: #f5f5f5;
  }
  .name {
    flex-grow: 1;
    font-size: 32rpx;
  }
  .msg {
    position: absolute;
    right: 90rpx;
    top: 40rpx;

    image {
      width: 32rpx;
      height: 36rpx;
    }
  }
}

.list_box1 {
  width: 325 * 2rpx;
  padding: 0 20rpx;
  background-color: #fff;
  margin: 10rpx auto;
  box-shadow: 0px 1px 8px 0px rgba(51, 46, 16 / 13%, 0.2);

  .title {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    font-weight: 900;
  }
  .list {
    .item {
      height: 110rpx;
      display: flex;
      align-items: center;

      image {
        width: 44rpx;
        height: 46rpx;
        margin-right: 26rpx;
      }
      .right {
        flex-grow: 1;
        color: #333;
        height: 110rpx;
        line-height: 110rpx;
        border-bottom: 1rpx solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &::after {
          content: '';
          width: 12rpx;
          height: 22rpx;
          // background: url('../../static/img/go') no-repeat 0 0 / 100% 100%;
        }
      }
    }
  }
}
</style>
